<template>
  <div class="me-box">
    <van-nav-bar title="我的订单" left-arrow @click-left="onClickLeft"/>

    <div class="list">
      <div class="list-main" v-for="it in list" :key="it.id">
        <div class="product-list" v-for="item in it.list" :key="item.id">
          <van-checkbox-group ref="checkboxGroup">
            <div class="product-card">
              <div class="product-picture">
                <img v-lazy="baseUrl + item.bgUrl"/>
              </div>
              <div class="product-info">
                <p class="product-name">{{item.name}}</p>
                <div class="price">
                  <div class="left">
                    ￥
                    <span>{{item.price * item.count}}</span>
                  </div>
                  <div class="btn">
                    数量：{{ item.count }}
                  </div>
                </div>
              </div>
            </div>
          </van-checkbox-group>
        </div>
        <div class="end" v-if="it.state === 'NEW'">
          <van-button color="#7232dd" plain @click="esc(it.id)">
            取消订单
          </van-button>
          <van-button @click="ok(it.id)" color="linear-gradient(to right, #ff6034, #ee0a24)">
            确认收货
          </van-button>
        </div>
        <div class="end" style="background-color: #aaa;" v-else-if="it.state === 'CANCEL'">
          已取消
        </div>
        <div class="end" style="background-color: #3cce3c;" v-else>
          已收货
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { myGoods, orderCan, orderFin } from '../../apis/meApi'
  export default {
    data(){
      return{
        list:[],
        baseUrl:'http://10.7.162.81:15666'
      }
    },
    methods: {
      onClickLeft(){
        this.$router.go(-1);
      },
      ok(id){
        console.log(id);
        orderFin({userId:this.$store.getters['common/user'].id, id}).then(res => {
          console.log(res);
        })
        this.getlist()
      },
      esc(id){
        console.log(id);
        orderCan({userId:this.$store.getters['common/user'].id, id}).then(res => {
          console.log(res);
        })
        this.getlist()
      },

      getlist(){
        myGoods(this.$store.getters['common/user'].id).then(res => {
          if (res.code === 200) {
            console.log(res);
            this.list = res.data
            console.log(this.list);
          }
        })
      }
    },
    created () {
      this.getlist()
    }
  }
</script>


<style lang="less" scoped>

  .me-box{
    height: 100%;
    .list{
      height: calc(100% - 46px);
      overflow-x: hidden;
      .list-main{
        margin-bottom: 20px;
        border-top: 1px solid #000;
          // height: calc(100% - 46px);
    // overflow-x: hidden;
    .product-list {
      display: block;
      width: 94%;
      height: 110px;
      padding: 0 8px;
      margin: auto;
      margin-top: 6px;
      background-color: white;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .van-checkbox-group {
        display: flex;
        width: 100%;
        justify-content: center;
        .van-checkbox {
          margin-right: 8px;
        }
        .product-card {
          width: 92%;
          height: 100px;
          display: flex;
          justify-content: space-between;
          .product-picture {
            width: 30%;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .product-info {
            width: 66%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .product-name {
              height: 50%;
              margin: 0;
              font-size: 0.9rem;
              overflow: hidden;
            }
            .price {
              height: 30%;
              display: flex;
              justify-content: space-between;
              .left {
                width: 40%;
                font-size: 0.7rem;
                color: rgb(251, 44, 33);
                span {
                  font-size: 0.95rem;
                }
              }
              .btn {
                width: 46%;
                > input:nth-child(odd) {
                  font-weight: bold;
                  width: 30px;
                  height: 30px;
                  border: 0 solid #000;
                  background-color: rgba(10, 10, 10, 0);
                }
                > input:nth-child(even) {
                  width: 36px;
                  height: 30px;
                  font-size: 0.8rem;
                  text-align: center;
                  border: 0 solid #000;
                  background-color: rgb(242, 242, 246);
                }
              }
            }
          }
        }
      }}
      }
      .end{
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
      }
    }
  }
</style>